import React, { FC } from 'react';
import { connect, ConnectProps, SummonerModelState } from 'umi';
import { Row, Col, Card, Radio } from 'antd';
import styles from './summoner.less';

// export default function Page() {
//   return (
//     <div>
//       <h1 className={styles.title}>Page summoner</h1>
//     </div>
//   );
// }
export interface PageProps extends ConnectProps {
  summoner: SummonerModelState;
}
const Summoner: FC<PageProps> = (props) => {
  console.log('🚀 ~ file: summoner.tsx ~ line 16 ~ props', props);
  const { summoner } = props;
  const { summoners } = summoner;
  return (
    <div>
      {/* <h1 className={styles.title}>Page summoner</h1>
      <h2>This is {JSON.stringify(props.summoner)}</h2> */}
      <Row>
        {summoners.map((item) => (
          <Col key={item.summoner_id} span={3} className={styles.heroitem}>
            <img
              src={`https://game.gtimg.cn/images/yxzj/img201606/summoner/${item.summoner_id}.jpg`}
            />

            <p>{item.summoner_name}</p>
          </Col>
        ))}
      </Row>
    </div>
  );
};
export default connect(({ summoner }: { summoner: SummonerModelState }) => ({
  summoner,
}))(Summoner);
